<template>
	<view class="container">
		<u-navbar :is-back="true" back-text="返回" back-icon-color="#fff" :back-text-style="{ color: '#fff'}"
			:title="title" title-color="white" :background="background"></u-navbar>

		<u-toast ref="uToast" />
		<view class="detail">
			<view class="comments">

				<view class="commentContainer">
						<view class="item_wrap">
							<view class="ileft">
								<view class="avatar">
									<u-image width="70rpx" height="70rpx" shape="circle" :src="parentComment.avatar"></u-image>
								</view>
								<view class="nick">
									<text>{{parentComment.nickname}}</text>
								</view>

							</view>

						</view>
						<view class="ccontent">
							<text>{{parentComment.content}}</text>
						</view>

				</view>
			</view>
			
			<view class="heng">
				
			</view>


			<view class="comments1" v-if="childComments.length">
				<view class="ctitle1">
					<text>评论区</text>
				</view>
				<view class="commentContainer1">
					<view class="vfor1" v-for="(item,index) in childComments" :key="index">
						<view class="item_wrap1">
							<view class="ileft1">
								<view class="avatar1">
									<u-image width="70rpx" height="70rpx" shape="circle" :src="item.avatar">
									</u-image>
								</view>
								<view class="nick1">
									<text>{{item.nickname}}</text>
								</view>

							</view>

						</view>
						<view class="ccontent1">
							<text>{{item.content}}</text>
						</view>
					</view>
				</view>
			</view>


		</view>

		<view class="writeComments">
			<view class="write_wrap">
				<u-input v-model="writeContent" type="text" :border="false" class="writeContent" placeholder="写评论..."
					confirm-type="评论" @confirm="writeComment" />
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '评论详情',
				background: {
					backgroundImage: 'linear-gradient(to right, #fa709a 0%, #fee140 100%)'
				},
				cid: '',
				parentComment:{},
				childComments:[],
				writeContent:''

			}
		},
		onLoad(options) {
			console.log(options.cid);
			this.cid = options.cid;
			this.init();

		},
		methods: {
			init() {
				this.$u.api.getCCommentsByCid({cid:this.cid}).then(res=>{
					console.log(res);
					this.parentComment=res.data.parentComment;
					this.childComments=res.data.childComments;
				})

			},
			writeComment() {
				this.$u.api.writeComment({
					aid: this.parentComment.aid,
					pid: this.cid,
					content: this.writeContent
				}).then(res => {
					console.log(res);
					if (res.msg === "评论成功") {
						this.writeContent = '';
						this.$refs.uToast.show({
							type: 'success',
							title: '评论成功'
						})
					} else {
						this.$refs.uToast.show({
							type: 'warning',
							title: '评论出错',
						})
					}
				})
			}
	
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.detail {
			display: flex;
			flex-direction: column;
			width: 720rpx;
			margin: auto;

			.comments {
				margin: 20rpx;

				.commentContainer {
					display: flex;
					flex-direction: column;
					margin-top: 20rpx;
					margin-bottom: 2rpx;

						.item_wrap {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 30rpx;

							.ileft {
								display: flex;
								align-items: center;

								.avatar {
									margin-right: 15rpx;

								}

								.nick {
									font-weight: bold;
									color: #666666;

									text {}
								}
							}

						}

						.ccontent {
							margin-left: 85rpx;
							font-size: 27rpx;
							color: #666666;

						}

				}
			}
			.heng{
				width: 720rpx;
				height: 20rpx;
				background-color: #f8fafa;
			}

			.comments1 {
				margin: 20rpx;

				.ctitle1 {
					text {
						font-size: 35rpx;
						color: #ff6611;
						font-weight: bold;
						border-bottom: 5rpx solid #ff6611;
						padding-bottom: 10rpx;
					}
				}

				.commentContainer1 {
					display: flex;
					margin-top: 20rpx;
					margin-bottom: 150rpx;

					.vfor1 {
						.item_wrap1 {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 30rpx;

							.ileft1 {
								display: flex;
								align-items: center;

								.avatar1 {
									margin-right: 15rpx;

								}

								.nick1 {
									font-weight: bold;
									color: #666666;

									text {}
								}
							}

						}

						.ccontent1 {
							margin-left: 85rpx;
							font-size: 27rpx;
							color: #666666;

						}

					}
				}
			}


		}

		.writeComments {
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			width: 750rpx;
			height: 100rpx;
			align-items: center;
			background-color: #fff;
			border-top: 1rpx solid #eee;
			padding: 0 25rpx;

			.write_wrap {
				.writeContent {
					background-color: #f4f4f4;
					height: 60rpx;
					align-items: center;
					border-radius: 30rpx;
					padding-left: 50rpx !important;
					width: 700rpx;
				}

			}



			// .share {
			// 	width: 100rpx;
			// 	display: flex;
			// 	justify-content: center;
			// 	align-items: center;
			// 	button{
			// 		background-color: rgba($color: #000000, $alpha: 0);
			// 		display: flex;
			// 		justify-content: center;
			// 		align-items: center;
			// 	}
			// 	button::after{
			// 		border: none;
			// 	}
			// }
		}
	}
</style>
